<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition template="inicio.xhtml">
        <ui:define name="content">
            <p:panel styleClass="centro painel">
                <h:form>
                    <p:panel id="topo" >
                        <p:graphicImage value="#{albumMB.albumSelecionado.capa}" width="50px" height="50px"/>
                        <h:outputText value="  #{albumMB.albumSelecionado.titulo}" />
                        <br /><h:outputText value="#{albumMB.albumSelecionado.descricao}" />
                    </p:panel>
                    <p:commandButton onclick="fotos.show();" value="Adicionar fotos" type="button" />
                    <p:dialog widgetVar="fotos" >
                        <p:growl id="msgFoto" life="5000" />
                        <p:fileUpload id="upload" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" multiple="false" cancelLabel="Cancelar"
                                      invalidFileMessage="Formato de arquivo invalido" uploadLabel="Carregar" label="Escolher"
                                      fileUploadListener="#{fotoMB.salvarImagem}"/>
                        <h:outputLabel for="titulo" value="Titulo" />
                        <p:inputText value="#{fotoMB.foto.titulo}" id="titulo"/>
                        <h:outputLabel for="descricao" value="Descricao" />
                        <p:inputText value="#{fotoMB.foto.descricao}" id="descricao" />
                        <p:commandButton value="Adicionar" action="#{fotoMB.salvar}" update="msgFoto @all"/>
                    </p:dialog>
                    <ui:repeat value="#{albumMB.albumSelecionado.fotos}" var="foto">
                        <p:graphicImage value="#{foto.url}" width="60px" height="60px" onclick="galeria.show();" />
                        <br /><h:outputText value="#{foto.titulo}" />
                        <br /><h:outputText value="#{foto.descricao}" />
                    </ui:repeat>
                    <p:dialog widgetVar="galeria" >
                        <p:galleria value="#{albumMB.albumSelecionado.fotos}" var="fotos" >
                            <p:graphicImage value="#{fotos.url}" />
                        </p:galleria>
                    </p:dialog>
                </h:form>
            </p:panel> 
        </ui:define>
    </ui:composition>
</html>

